<template>
	<view>
		<view class="navbox">
			<view class="statnav">
				<view class="otnav">
					<view class="item" @click="clickChooseIrack(1)" :class="irack?`cur`:``" >书架<i></i></view>
					<view class="item" @click="clickChooseIrack(0)" :class="!irack?`cur`:``" >阅读历史<i></i></view>
				</view> 
			</view>
		</view>
		
		<view class="navbox_xheight"></view>
		
		<view class="book-ol book-ol-rank" v-show="!irack">
			<view class="book-li" v-for="(item,index) in hlist" :key="index" >
				<view class="book-layout">
					<image :src="item.icon" class="book-cover" @click="itemClick(item)" />
					<view class="book-cell" >
						<view class="book-title-x" @click="itemClick(item)">
							<view class="book-title">{{item.title}}</view>
						</view>
						<view class="book-meta" @click="itemClick(item)">
							<view class="book-meta-l">
								<view class="book-author">
									{{item.author}}
								</view>
							</view>
						</view>
						
						<view @click="clickGoBookRead(item.id,item.bookchapter_id,item.bookchapter_speed)" class="btnread">继续阅读</view>
					</view>
				</view>
			</view>
			
			<view class="more emptymore" v-if="!hlist || hlist.length<1" >还没有阅读历史</view>
			<view class="more endmore" v-if="hlist && hlist.length>0 && ishEnd" >我也是有底线的</view>
		</view>
		
		<view class="book-ol book-ol-rank" v-show="irack">
			<t-slide ref="slide" @del="delItem">
			   <template v-slot:default="{item}">
					<view class="book-li"> 
						<view class="book-layout">
							<image :src="item.icon" class="book-cover" @click="itemClick(item)"/>
							<view class="book-cell">
								<view class="book-title-x" @click="itemClick(item)">
									<view class="book-title">{{item.title}}</view>
								</view>
								<view class="book-meta" @click="itemClick(item)">
									<view class="book-meta-l">
										<view class="book-author">
											{{item.author}}
										</view>
									</view>
								</view>
								
								<view @click="clickGoBookRead(item.id,item.bookchapter_id,item.bookchapter_speed)" class="btnread">继续阅读</view>
							</view>
						</view>
					</view>
			   </template>
			</t-slide>
			
			<view class="more emptymore" v-if="!rlist || rlist.length<1" >书架空空如也</view>
			<view class="more endmore" v-if="rlist && rlist.length>0 && isrEnd" >我也是有底线的</view>
			
		</view>
	</view>
</template>

<script>
	import tSlide from "@/components/t-slide/t-slide.vue" ;
	export default {
		components: {
			tSlide
		},
		computed: {
			top() {
				return this.$ba.safeAreaTop() + this.$ba.navHeight();
			}
		}, 
		data() {
			return {
				hlist: [],
				rlist: [],
				rp:1 ,
				rps:24 ,
				hp:1 ,
				hps:24 ,
				irack:1,
				isrEnd:false,
				ishEnd:false,
			};
		} ,
		onShow() {
			this.rlist = [] ;
			this.rp = 1;
			this.rps = 24 ;
			this.isrEnd = false ;
			this.hlist = [] ;
			this.hp = 1;
			this.hps = 24 ;
			this.ishEnd = false ;
			this.fetch() ; 
		},
		onLoad(){
			
		},
		//上拉触底 加载更多
		onReachBottom() {
			this.fetchList();
		},
		methods: {
			fetch(){
				this.fetchList() ;
			},
			clickChooseIrack(irack){
				this.irack = irack ;
				this.fetchList() ;
			},
			resetData(){
				if(this.irack){
					this.rlist = [] ;
					this.rp = 1;
					this.rps = 24 ;
					this.isrEnd = false ;
				}else{
					this.hlist = [] ;
					this.hp = 1;
					this.hps = 24 ;
					this.ishEnd = false ;
				}
			},
			itemClick(item){
				if(!item || !item.id) return ;
				return this.$go.burl('book/detail?id='+item.id)
			},
			delItem(item){
				if(!item || !item.id) return ;
				
				let that = this ;
				let post = {} ;
				post.book_id = item.id ;
				this.$iapi.vapi('readinghistory/deleterack', post, {
					succ: js => {
						let list = [] ;
						that.rlist.map(it=>{
							if(it.id != item.id) list.push(it);
						});
						
						that.rlist = list ;
						that.$nextTick(()=>{
						   that.$refs.slide.assignment(that.rlist) ;
						});
					}
				});
			},
			clickGoBookRead(book_id,bookchapter_id,bookchapter_speed){
				this.$go.burl('book/read?book_id='+book_id + '&bookchapter_id='+bookchapter_id + '&bookchapter_speed='+bookchapter_speed) ;
			},
			fetchList(){
				if(this._xing) return ;
				if(this.irack && this.isrEnd) return ;
				if(!this.irack &&this.ishEnd) return ; 
				
				let that = this ;
				let post = {} ;
				post.irack = this.irack ;
				
				if(this.irack){
					if(this.rp) post.p = this.rp ;
					if(this.rps) post.ps = this.rps ;
				}else{
					if(this.hp) post.p = this.hp ;
					if(this.hps) post.ps = this.hps ;
				}
				
				this._xing = true ; 
				this.$loading.show('加载中') ;
				this.$iapi.vapi('readinghistory/list', post, {
					succ: js => {
						if(!js || !js.list || js.list.length < 1){
							if(that.irack) that.isrEnd = true ;
							if(!that.irack) that.ishEnd = true ;
							return ; 
						}
						
						if(that.irack){
							js.list.map(it=>{
								that.rlist.push(it) ; 
							});
							
							that.$nextTick(()=>{
							   that.$refs.slide.assignment(that.rlist) ;
							});
							
							that.rp++ ;
							if(js.sum <= (that.rp * that.rps)){
								that.isrEnd = true ;
							}
						}else{
							js.list.map(it=>{
								that.hlist.push(it) ; 
							});
							
							that.hp++ ;
							if(js.sum <= (this.hp * this.hps)){
								that.ishEnd = true ;
							}
						}
					},
					ever: js => {
						this._xing = false;
						this.$loading.hide() ;
					},
				});
			},

			//刷新
			onPullDownRefresh() {
				wx.stopPullDownRefresh();
				this.resetData() ; 
				this.fetch() ;
			},
		}
	};
</script>

<style>

	.book-layout {
	    display: list-item;
	    text-align: -webkit-match-parent;
	    overflow: hidden;
	    padding: 0.5rem 1rem;
		    list-style: none;
	    -webkit-transition: padding-left .15s;
	    transition: padding-left .15s;
	}
	
	.book-cover {
	    font-size: 0;
	    float: left;
	    width: 4.125rem;
	    height: 5.5rem;
	    margin-right: .5rem;
	    box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
	}
	
	.book-cell {
	    overflow: hidden;
	}
	
	.red {
	    color: #ed424b;
	}
	.book-title-r {
	    font-size: .8125rem;
	    line-height: 1.5rem;
	    float: right;
	    margin-left: .5rem;
	    color: #969ba3;
	}
	
	.book-title {
	    line-height: 1.4;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	.book-tags {
	    font-size: .8125rem;
	    margin: .125rem 0;
	    color: #969ba3;
		word-break: break-all;
	}

	.book-author {
	    font-size: .8125rem;
	    display: block;
	    overflow: hidden;
	    max-width: 100%;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    color: #969ba3;
	}

	.emptymore{
		color:#888;font-size:26upx;text-align: center; width:100%;
		margin:40upx auto;
	}
	.endmore{
		color:#888;font-size:26upx;text-align: center; width:100%;
		margin:40upx auto;
	}
	
	.navbox{
		position: fixed;
		top:0px;
		left:0px;
		background: #fff;
		height:160upx;
		width:100%;
		z-index: 99;
	}
	
	.navbox_xheight{
		height:200upx;
	}
	
	 .statnav {
		  position: relative;
		  display: block;
		  margin-top: 70upx;
		  padding: 0 60upx 40upx;
		  background: #fff;
		  border-radius: 10upx 10upx 0upx 0upx;
	 }
	 
	 .statnav .otnav {
	  display: flex;
	 }
	 .statnav .otnav .item {
	  display: block;
	  position: relative;
	  margin-right: 54upx;
	  font-size: 28upx;
	  line-height: 70upx;
	  color: #939393;
		font-weight: bold;
	 }
	 .statnav .otnav .item.cur {
	  font-size: 42upx;
	  line-height: 70upx;
	  color:#000;
	 }
	 .statnav .otnav .item.cur i {
	  display: block;
	  position: absolute;
	  width: 30upx;
	  height: 6upx;
	  left: 50%;
	  bottom: -8upx; 
	  margin-top:10upx;
	  margin-left: -15upx;
	  background: #f45606;
	 }
	 
	.btnread {
	    padding: 4upx 12upx;
	    font-size: 12upx;
		width:150upx;
		line-height:40upx;
		font-size:24upx;
		height:40upx;
		display: inline-block;
		float:right;
		margin-right:20upx;
	    color: #fff;
		background-color: #f60;
		text-align: center;
	    border: 1px solid rgba(0,0,0,0.21);
	    border-bottom: 4upx solid rgba(0,0,0,0.21);
	    border-radius: 4upx;
	}
</style>
